<template>
    <div class="business_add">
			<div class="title">
				<span class="left">添加设备</span>
				<el-button class="add" type="primary" size="small" icon="el-icon-back" @click="$router.back(-1)">返回
				</el-button>
			</div>
      <!-- <titleDiv
        :title="title"
        :isShow="true"
				style="height: 60px; line-height: 60px;"
      ></titleDiv> -->
      <div class="main">
        <el-form ref="form" :model="form" :rules="rules"  label-width="100px">
          <el-form-item label="设备类型" prop="equipment">
            <el-select v-model="form.equipment" placeholder="设备类型选择">
              <el-option
                v-for="item in equipmentType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="form.deviceName"  placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="设备地址码" prop="addressCode">
              <el-input v-model="form.addressCode"  placeholder="请输入设备地址码"></el-input>
          </el-form-item>
           <el-form-item label="设备品牌" prop="brand">
              <el-input v-model="form.brand" placeholder="请输入设备品牌"></el-input>
          </el-form-item>
           <el-form-item label="厂家名称" prop="manufacturers">
              <el-input v-model="form.manufacturers" placeholder="请输入设备生产厂家"></el-input>
          </el-form-item>
           <el-form-item label="设备型号" prop="unitType">
              <el-input v-model="form.unitType" placeholder="请输入设备型号"></el-input>
          </el-form-item>
          <el-form-item label="备注（选填)" prop="remark">
            <el-input v-model="form.remark" class="textArea" :plain='true' :change="maxSizeNum()" type="textarea" resize="none" placeholder="设备备注内容"></el-input>
          </el-form-item>
					<el-form-item >
						<el-button style="margin-left: 0;" class="btn" type="primary" @click="addFacility('form')">提交</el-button>
					</el-form-item>
        </el-form>
      </div>
    </div>
</template>
<script>
  // import titleDiv from './view/titleDiv.vue'
	import {addFacility} from '../api/getData.js'
  export default {
    name: 'business_add',
    data: function () {
			let reg = /^[1-9][0-9]{0,2}$/
			let validateCode = (rule, value, callback) => { 
				if (!value) { 
					return callback(new Error('请填写地址码')) 
				} 
				setTimeout(() => { 
					if (!reg.test(value)) { 
						callback(new Error('地址码须为1-999的数字')) 
					} else { 
						callback() 
					} 
				}) 
			}
      return {
        title:"添加设备",
        name:'XXXX',
        time:'2018-11-01 09:15',
        equipmentType: [{
          value: 'hjq',
          label: '呼叫器'
        }, {
          value: 'pjq',
          label: '评价器'
        }, {
          value: 'qhj',
          label: '取号机'
        }, {
          value: 'dp',
          label: '电视机'
        }, {
          value: 'led',
          label: 'LED屏'
        }],
				options:[],
				form:{
					equipment: '',
					deviceName:'',
					addressCode:'',
					brand:'',
					manufacturers:'',
					unitType:'',
					remark:''
				},
				rules:{
					equipment:[{required: true, message: '请选择设备类型', trigger: 'change'}],
					deviceName:[{required: true, message: '请输入设备名称', trigger: 'blur'}],
					addressCode:[
						{required: true,validator:validateCode,trigger: ['blur', 'change']}
					]
				}
      }
    },
    components:{
      // titleDiv
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
			addFacility(formName){
				this.$refs[formName].validate((valid) => {
          if (valid) {
						console.log(this.form)
						addFacility({
							name:this.form.deviceName,
							uniqueldentifier:this.form.addressCode,
							manufacturer:this.form.manufacturers,
							equipmentmodel:this.form.unitType,
							type:this.form.equipment,
							welcomelanguage:this.form.remark
						}).then((res) =>{
							console.log(res.data,"添加设备")
							if(res.data.code == 0){
								this.$message({
									message: res.data.msg,
									type: 'success'
								});
								setTimeout(()=>{
									this.$router.push('/equipment/equipmentindex')
								},1000)
							}else{
                	this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  });
              }
						}).catch((error) =>{
							console.log(error)
						})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
				
      },
      maxSizeNum(e){
          console.log(e,1,this.form.remark.length)
          this.form.remark.length
          if(this.form.remark.length>500){
            this.$message({
              message: '最多只能输入500字',
              type: 'warning'
            });
            this.form.remark = this.form.remark.splice(0,500)
          }
      }
		} // 函数
  }
</script>
<style lang='scss'>
    .business_add {
       box-sizing: border-box;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 64px;
				line-height: 64px;
				background: #fff;
				overflow: hidden;
				text-align: left;
				padding:0 20px;
				color: #333437;
				font-size: 16px;
			}
      .main{
        background: #fff;
        width: 100%;
        margin-top:2%;
        padding: 5% 20%;
        .textArea{
          textarea{
            min-height: 240px!important;
          }

        }
        .el-form-item__label{
          font-weight: bold;
        }
        .btn{
          width: 120px;
          height:32px;
          line-height: 1px;
          margin-left: 100px;
        }
      }
    }
</style>
